<template>
  <div class="hm-input-number">
    <button @click="handleMinus">-</button>
    <span>{{ value }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
/**
 * 数字几是父组件传进来
 * +和-按钮的逻辑 点击事件需要注册
 *  + 数字是不是+1 数字是哪里来的 父组件传过来的 能直接改吗？不能 需要子传父
 *  - 逻辑基本一致 只是减1 不能减到负数
 */
export default {
  props: {
    value: Number,
  },
  methods: {
    handleMinus() {
      // 控制不能减到0以下 等下在实现
      let result = this.value - 1;
      // 因为减到负数，如果是负数 强制改为0
      if (result < 0) result = 0;
      // 自定义事件 input click change名字是可以起的
      // this.$emit('自定义事件名', 参数1， 参数2， 参数3)
      // 父组件@自定义事件名
      // 为了套v-model的语法糖 v-model语法糖他默认要@input所以我们这里自定义事件名起名才是input
      this.$emit("input", result);
    },
    handleAdd() {
      this.$emit("input", this.value + 1);
    },
  },
};
</script>

<style scoped lang="less">
.hm-input-number {
  span {
    margin: 0 10px;
  }
  button {
    padding: 5px 10px;
  }
}
</style>